<template>
  <grimm-page type="popup-view" title="Picker">
    <template slot="content">
      <div>
        <grimm-button @click="showPicker">Picker</grimm-button>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
const positions = ['top', 'right', 'bottom', 'left', 'center'];
let cur = 0;
export default {
  components: { GrimmPage },
  data() {
    return {
      type: 'popup-dialog',
      mask: true,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      position: '',
      multiList: [
        [
          { text: '剧毒v', value: '剧毒' },
          { text: '蚂蚁v', value: '蚂蚁' },
          { text: '幽鬼v', value: '幽鬼' },
        ],
        [
          { text: '输出v', value: '输出' },
          { text: '控制v', value: '控制' },
          { text: '核心v', value: '核心' },
          { text: '爆发v', value: '爆发' },
          { text: '输出2v', value: '输出2' },
          { text: '控制3v', value: '控制3' },
          { text: '核心4v', value: '核心4' },
          { text: '爆发5v', value: '爆发5' },
          { text: '输出6v', value: '输出6' },
          { text: '控制7v', value: '控制7' },
          { text: '核心8v', value: '核心8' },
          { text: '爆发9v', value: '爆发9' },
        ],
      ],
    };
  },
  methods: {
    showPicker() {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: 'Picker',
          data: this.multiList,
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }
      this.picker.show();
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      console.log(selectedVal, selectedIndex, selectedText);
    },
    cancelHandle() {
      console.log('selectedVal, selectedIndex, selectedText');
    },
    showPopup(i) {
      if (i === 4) {
        this.position = positions[cur++];
        if (cur === positions.length) {
          cur = 0;
        }
      }
      this['visible' + i] = true;
      setTimeout(() => {
        this['visible' + i] = false;
      }, 2000);
    },
  },
};
</script>

<style lang="stylus" >
.popup-view {
  .content > div {
    margin: 10px 0;
  }
}

.grimm-my-popup {
  .grimm-popup-center {
    .grimm-popup-content {
      padding: 20px;
    }
  }

  .grimm-popup-content {
    padding: 80px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
  }
}

.grimm-extend-popup {
  .grimm-extend-popup-content {
    padding: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
</style>
